<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script type="text/javascript">
            function Bezier(){
                
            }
            
            Bezier.prototype = {
                constructor : Bezier,
                
                transform : function(matrix){
                    
                },
                
                paint : function(ctx){
                    
                },
                
                equals : function(anotherBezier){
                    
                },
                
                clone : function(){
                    
                },
                
                near : function(x, y, radius){
                    
                },
                
                contains: function(x, y){
                    
                },
                
                toString: function(){
                    
                },
                
                getPoints:function(){
                    
                },

                getBounds:function(){
                    
                },
                
                toSVG: function(){
                    
                }
            }
            
            
            var points = [[100, 100], [200, 100], [200, 200], [300, 200], [300, 100]];
            var s2_6 = [[100, 50], [80, 50], [80, 150], [180, 150], [180, 130], [160, 130], [160, 30] /*,  [200, 10]*/];
            
            /**computes the drawing points for the Bezier curve*/
            function bezierPoints(points, step){
                
                /**Computes factorial*/
                function fact(k){
                    if(k==0 || k==1){
                        return 1;
                    }
                    else{
                        return k * fact(k-1);
                    }
                }
            
                /**Computes Bernstain*/
                function B(i,n,u){
                    //if(n < i) throw "Wrong";
                    return fact(n) / (fact(i) * fact(n-i))* Math.pow(u, i) * Math.pow(1-u, n-i);
                }                            
             
                function P(u, points){
                    var r = [0,0];
                    var n = points.length-1;
                    for(var i=0; i <= n; i++){
                        r[0] += points[i][0] * B(i, n, u);
                        r[1] += points[i][1] * B(i, n, u);
                    }                
                    return r;
                }
                
                var temp = [];
                for(var t=0;t<=1; t=t+step){
                    var p = P(t, points);
                    temp.push(p);
                }
                return temp;
            }
            
            
            function paint_point(ctx, color,  point){
                //return;
                ctx.save();
                switch(color){
                    case 'red':
                        ctx.strokeStyle = "rgb(200, 0,0)";
                        ctx.strokeRect(point[0]- 3 , point[1] - 3, 6, 6);
                        break;
                        
                    case 'black':
                        ctx.strokeStyle = "rgb(0, 0,0)";
                        ctx.strokeRect(point[0]- 1 , point[1] - 1, 2, 2);
                        break;
                        
                    case 'green':
                        ctx.strokeStyle = "rgb(0, 200,0)";
                        ctx.strokeRect(point[0]- 2 , point[1] - 2, 4, 4);
                        break;
                }                
                ctx.restore();
            }
            
            function paint_points(ctx, points, color){
                ctx.save();
                //controll points
                for(var i=0;i<points.length; i++){
                    paint_point(ctx, color, points[i]);
                }
                ctx.restore();
            }
            
            /**Generic paint curve method*/
            function paint_curve(ctx, points){
                ctx.save();

                ctx.moveTo(points[0][0], points[0][1]);
                for(var i=1;i<points.length; i++){
                    ctx.lineTo(points[i][0], points[i][1]);
                }
                ctx.stroke();
                ctx.restore();
            }
            
            function init(){
                var ctx = document.getElementById("pinza").getContext("2d");
               
                var bPoints = bezierPoints(s2_6, 0.01);
                paint_points(ctx, s2_6, "red");                
                
                paint_curve(ctx, bPoints);
            }
            
        </script>
    </head>
    <body onload="init()">
        <canvas style="border: 1px solid gray;" id="pinza" width="1200" height="1200"></canvas>
    </body>
</html>
